<template>
  <div>
    <Table
      ref="tableRef"
      :url="URL_PAGINGSTATIONACTIVITY"
      :columns="data.columns"
      :handles="data.handles"
      :toolbar="data.toolbar"
      :query="data.query"
    ></Table>
    <!-- 弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="终止"
      width="430"
      class="qc-custom-dialog has-tips"
    >
      <div class="tip">
        <div class="icon"></div>
        提示：活动终止后不可恢复，请谨慎操作！
      </div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        class="dialog-form-wrap"
      >
        <el-form-item label="终止原因" prop="reason">
          <el-input
            v-model.trim="ruleForm.reason"
            placeholder="请输入终止原因"
            maxlength="200"
            type="textarea"
            :rows="3"
            show-word-limit
            clearable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="hide">取消</el-button>
          <el-button type="primary" v-btnAntiShake="onSubmit"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="stationActivitiesList">
import Table from '@/components/table/index.vue';
import {
  URL_PAGINGSTATIONACTIVITY,
  terminateStationActivity,
} from '@/service/apis/market';
import { queryDicByParent } from '@/service/apis/api';
import { FormInstance, FormRules } from 'element-plus';

const router = useRouter();

const tableRef = ref();

const emit = defineEmits(['get-update']);
onActivated(() => {
  emit('get-update', (flag: boolean) => {
    if (flag) {
      tableRef.value?.getData();
    }
  });
});

queryDicByParent({
  listDtos: ['stationActivityStatus'],
}).then((res: any) => {
  if (res) {
    data.columns[1].dic = [...res.stationActivityStatus];
    data.query[1].props.options = [...res.stationActivityStatus];
  }
});

const data = reactive({
  columns: [
    {
      prop: 'name',
      label: '方案名称',
    },
    {
      prop: 'status',
      label: '活动状态',
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'startTime',
      label: '活动开始时间',
    },
    {
      prop: 'endTime',
      label: '活动结束时间',
    },
    {
      prop: 'reason',
      label: '终止原因',
    },
    {
      prop: 'updateBy',
      label: '修改人',
    },
    {
      prop: 'updateTime',
      label: '修改时间',
    },
  ],
  handles: [
    {
      label: '详情',
      handle: (row: any) => {
        console.log('详情 ---', row);
        router.push({
          name: 'stationActivitiesDetail',
          query: { id: row.id },
        });
      },
    },
    {
      label: '修改',
      permission: 'stationActivitiesList.edit',
      disabledFun: (row: any) => {
        return row.status !== 0;
      },
      handle: (row: any) => {
        console.log('编辑---', row);
        router.push({
          name: 'stationActivitiesEdit',
          query: { id: row.id },
        });
      },
    },
    {
      label: '终止',
      color: '#FA3939',
      permission: 'stationActivitiesList.stop',
      disabledFun: (row: any) => {
        return row.status > 1;
      },
      handle: (row: any) => {
        show(row);
      },
    },
  ],
  toolbar: [
    {
      label: '新增',
      permission: 'stationActivitiesList.add',
      icon: 'icon-add',
      type: 'primary',
      handle: (row: any) => {
        router.push({
          name: 'stationActivitiesAdd',
        });
      },
    },
  ],
  query: [
    {
      label: '方案名称',
      prop: 'name',
      comName: 'input',
      props: {
        placeholder: '请输入方案名称',
      },
    },
    {
      label: '活动状态',
      prop: 'status',
      comName: 'select',
      props: {
        placeholder: '请选择活动状态',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
    {
      label: '活动开始日期',
      prop: 'startTime',
      comName: 'date',
      keys: ['startStartTime', 'endStartTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '活动结束日期',
      prop: 'endTime',
      comName: 'date',
      keys: ['startEndTime', 'endEndTime'],
      props: {
        type: 'daterange',
      },
    },
  ],
});

// 终止弹框
const ruleFormRef = ref<FormInstance>();
let dialogVisible = ref(false);
const ruleForm = reactive({
  id: '',
  reason: '', // 终止原因
});
const rules = reactive<FormRules>({
  reason: [{ required: true, message: '请输入备注', trigger: 'blur' }],
});
// 关闭弹框
const hide = () => {
  dialogVisible.value = false;
};
// 打开弹窗并赋值
const show = (row: any) => {
  dialogVisible.value = true;
  ruleForm.id = row.id;
  ruleForm.reason = '';
  nextTick(() => {
    ruleFormRef.value?.clearValidate();
  });
};
const onSubmit = async () => {
  console.log('submit---', ruleForm);
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate((valid, fields: any) => {
    if (valid) {
      terminateStationActivity(ruleForm).then((res: any) => {
        console.log('res===', res);
        hide();
        tableRef.value.getData();
      });
    } else {
      for (const key in ruleForm) {
        if (fields[key]) {
          ruleFormRef.value?.scrollToField(key);
          break;
        }
      }
    }
  });
};
</script>